<template>
  <div class="persons w-full h-full flex">
    <div class="left-search flex-shrink-0 light-bg">
      <Tree />
    </div>
    <div class="cont flex-1 flex">
      <!-- 右边 左侧内容 -->
      <div class="left flex-1 light-bg flex-shrink-0">
        <view class="options">
          <a-button @click="showAddPerson">新增</a-button>
        </view>
        <a-table
          :dataSource="dataSource"
          :columns="columns"
          :pagination="false"
          :scroll="{ x: '100%', y: 300 }"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :customRow="rowClick"
          :rowClassName="(_record, index) => index === rowClickIndex && 'row-clicked'"
        >
          <template #bodyCell="{ column, text, record }">
            <template v-if="column.dataIndex == 'action'">
              <!-- 下拉菜单 -->
              <a-dropdown>
                <div class="tip-dots tip-dots-hover">
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
                <template #overlay>
                  <a-menu>
                    <a-menu-item>
                      <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
                        1st menu item
                      </a>
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </template>
          </template>
        </a-table>
      </div>
      <!-- 右边 右侧内容 -->
      <div class="right flex-1 light-bg flex-shrink-0 overflow-y-auto">
        <div class="title">人员详情</div>
        <div class="flex-1 overflow-y-auto" >
          <PersonInfo />
        </div>
      </div>
    </div>
  </div>

  <AddPerson v-if="addPersonCfg.show" @close="addPersonCfg.show = false"/>
</template>

<script setup>
import treeData from './tree.json'
import Tree from './tree.vue'
import PersonInfo from './comps/person-info.vue'
import AddPerson from './comps/add-person.vue'

// =========== 新增
const addPersonCfg = reactive({
  show: false
})
const showAddPerson = () => {
  addPersonCfg.show = true
}

// =========== 新增

const dataSource = [
  { key: '1', name: '小明', pos: 'xxx', phone: '18888888888', dept: '总队' },
  { key: '2', name: '小明', pos: 'xxx', phone: '18888888888', dept: '总队' },
  { key: '3', name: '小明', pos: 'xxx', phone: '18888888888', dept: '总队' },
]

const columns = [
  { title: '姓名/工号', dataIndex: 'name', key: 'name' },
  { title: '职务/岗位', dataIndex: 'pos', key: 'pos' },
  { title: '移动电话', dataIndex: 'phone', key: 'phone' },
  { title: '所属单位/部门', dataIndex: 'dept', key: 'dept' },
  { title: '操作', dataIndex: 'action', key: 'action' },
]

const selectedRowKeys = ref([])
const onSelectChange = (e) => {
  selectedRowKeys.value = e
}

// 行点击
const rowClickIndex = ref()
const rowClick = (record, index) => {
  return {
    onclick: () => {
      console.log(record, index)
      rowClickIndex.value = index
    },
  }
}
</script>

<style lang="scss" scoped>
.persons {
  padding: 20px;
}

.light-bg {
  background: rgba($color: #000000, $alpha: 0.2);
}

.left-search {
  width: 20.3%;
}
.cont {
  margin-left: 20px;
  .right {
    margin-left: 20px;
  }
}

// 行点击后行的类
:deep .ant-table-wrapper {
  .ant-table {
    .ant-table-tbody {
      .row-clicked {
        cursor: pointer;
        background: rgba(255, 170, 0, 0.3);
        box-shadow: 0 0 20px 2px rgba(255, 203, 100, 0.51) inset;
      }
    }
  }
}

.tip-dots {
  width: 30px;
  padding-right: 15px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  span {
    width: 3px;
    height: 3px;
    margin: 2px 0;
    background-color: #56b8ff;
    border-radius: 50%;
  }
  &:hover {
    span {
      background-color: #ffb317 !important;
    }
  }
}

// .ant-table-wrapper .ant-table .ant-table-tbody .ant-table-row:nth-child(even)
</style>
